<template>
  <div class="article-item" v-if="item.articleDo">
    <div id="box">
      <video
        autoplay
        muted
        loop
        v-if="selected == 2 && item.articleDo.masterVideo !== null"
        @click="$router.push(`/article_detail?articleId=${item.articleDo.id}`)"
        :src="$store.state.imgBase + item.articleDo.masterVideo"
      ></video>
      <img
        v-else
        @click="$router.push(`/article_detail?articleId=${item.articleDo.id}`)"
        :src="$store.state.imgBase + item.articleDo.masterImg"
        alt=""
      />
      <div>{{ item.articleDo.title }}</div>
      <div class="article-user">
        <div class="left">
          <van-image
            style="vertical-align: middle"
            round
            width="1rem"
            height="1rem"
            :src="$store.state.imgBase + item.createUser.avatarUrl"
          />
          <span>{{ item.createUser.username }}</span>
        </div>
        <div class="right">
          <van-icon
            @click="
              like = 1;
              likeAdd();
            "
            v-if="like == 0"
            name="like-o"
          />
          <van-icon
            @click="
              like = 0;
              likeDel();
            "
            v-else
            name="like"
            color="#f00"
          />
          <span>{{ like_num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item", "selected"],
  methods: {
    likeDel() {
      let url = `/op/goodDo/nogood`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.item.articleDo.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("取消点赞", res);
          if (res.data.code == 5000) {
            this.like_num--;
          }
        });
    },
    likeAdd() {
      let url = `/op/goodDo/good`;
      let params = {
        userId: this.$store.state.id,
        articleId: this.item.articleDo.id,
      };
      this.axios
        .post(url, params, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          console.log("点赞上传", res);
          if (res.data.code == 2000 ) {
            this.like_num++;
          }
        });
    },
  },
  data() {
    return {
      like: 0,
      like_num: this.$store.state.goodCont,
    };
  },
};
</script>

<style lang="scss" scoped>
.article-item {
  width: 100%;
  border-radius: 2vw;
  height: 40vh;
  background-color: rgb(236, 248, 246);
  display: flex;
  flex-wrap: wrap;
  margin: 2vw 0 1vh;
  img {
    border-radius: 2vw;
    width: 100%;
    height: 30vh;
  }
  video {
     border-radius: 2vw;
    width: 100%;
    height: 35vh;
  }
  #box {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 0.9rem;
    margin: 0 3vw;

    > .article-user {
      display: flex;
      font-size: 0.8rem;
      flex-direction: row;
      margin-top: 1vh;
      justify-content: space-between;
    }
  }
}
</style>
